<template>
	<view class="beijingse" v-if="pageShow">
		<!-- <u-modal :show="show" cancelColor="#555" confirmColor="#BA9549" :showCancelButton="true" :title="title"
			@cancel="cancel" @confirm="confirm"></u-modal> -->
		<!-- 绑定支付宝 -->
		<!-- <u-popup :show="zfbshow" @close="zfbclose" :closeable="zfbcloseable">
			<view class="mainpadding">
				<view class="xiaohei bigtext fonweight textcenter">绑定支付宝</view>
				<view class="mainpadding">
					<view class="xiahuaxian margin_top flexbetween">
						<view class="ershiba xiaohei fonweight">账号</view>
						<input class="textright" placeholder="请输入您的手机号" type="number" />
					</view>
					<view class="xiahuaxian margin_top flexbetween">
						<view class="ershiba xiaohei fonweight">验证码</view>
						<view class="flexright">
							<input class="margin_right2 textright" placeholder="请输入验证码" type="number" />
							<view class="huanbtn flexcenter">获取验证码</view>
						</view>
					</view>
					<view class="margin_top6 bigbtn">立即绑定</view>
				</view>
			</view>
		</u-popup> -->
		<!-- 绑定微信 -->
		<!-- <u-popup :show="wxshow" @close="wxclose" :closeable="wxcloseable">
			<view class="mainpadding">
				<view class="xiaohei bigtext fonweight textcenter">绑定微信</view>
				<view class="mainpadding">
					<view class="xiahuaxian margin_top flexbetween">
						<view class="ershiba xiaohei fonweight">账号</view>
						<input class="textright" placeholder="请输入您的手机号" type="number" />
					</view>
					<view class="xiahuaxian margin_top flexbetween">
						<view class="ershiba xiaohei fonweight">验证码</view>
						<view class="flexright">
							<input class="margin_right2 textright" placeholder="请输入验证码" type="number" />
							<view class="huanbtn flexcenter">获取验证码</view>
						</view>
					</view>
					<view class="margin_top6 bigbtn">立即绑定</view>
				</view>
			</view>
		</u-popup> -->
		<!-- 绑定银行卡 -->
		<!-- <u-popup :show="yhkshow" @close="yhkclose" :closeable="yhkcloseable">
			<view class="mainpadding">
				<view class="xiaohei bigtext fonweight textcenter">绑定银行卡</view>
				<view class="mainpadding">
					<view class="xiahuaxian margin_top flexbetween">
						<view class="ershiba xiaohei fonweight">开户行</view>
						<input class="textright" placeholder="请输入银行卡" type="number" />
					</view>
					<view class="xiahuaxian margin_top flexbetween">
						<view class="ershiba xiaohei fonweight">银行卡号</view>
						<input class="textright" placeholder="请输入银行卡号" type="number" />
					</view>
					<view class="xiahuaxian margin_top flexbetween">
						<view class="ershiba xiaohei fonweight">手机号</view>
						<input class="textright" placeholder="请输入您的手机号" type="number" />
					</view>
					<view class="xiahuaxian margin_top flexbetween">
						<view class="ershiba xiaohei fonweight">验证码</view>
						<view class="flexright">
							<input style="width: 100px;" class="margin_right2 textright" placeholder="请输入验证码"
								type="number" />
							<view class="huanbtn flexcenter">获取验证码</view>
						</view>
					</view>
					<view class="margin_top6 bigbtn">立即绑定</view>
				</view>
			</view>
		</u-popup> -->
		<view class="dbox">
			<view class="flexbetween">
				<view class="xiaobai bigtext" style="color: #E6D4B1;">总金额</view>
				<view class="xiaobai ershil" @click="flag=1;bshow=true;">保证金规则</view>
			</view>
			<view class="xiaobai fonweight margin_top">￥<text style="font-size: 60rpx;">{{userInfo.bzj_price}}</text></view>
			<view class="flexbetween margin_top4">
				<view class="flexleft">
					<view class="margin_right7">
						<view class="flexleft">
							<view class="xiaobai ershiba margin_right1" style="color: #E6D4B1;">冻结金额</view>
							<u-icon name="info-circle" color="#E6D4B1" size="20" @click="flag=2;bshow=true"></u-icon>
						</view>
						
						<view class="xiaobai bigtext margin_top">￥{{userInfo.zy_bzj_price}}</view>
					</view>
					<view class="">
						<view class="xiaobai ershiba" style="color: #E6D4B1;">累计收益</view>
						<view class="xiaobai bigtext margin_top">￥{{userInfo.total_syprice}}</view>
					</view>
				</view>
				<view class="tixianbtn flexcenter" @click="jumpurl('/pages_mypage/tixian')">提现</view>
			</view>
			<image src="@/static/image/system/bzjimg.png" class="qsimg" mode=""></image>
		</view>
		<view class="mainpadding">
			<view class="bigtext fonweight xiaohei">收支明细</view>
			<view class="xiahuaxian margin_top" v-for="item in list.data" :key="item.id">
				<view class="flexbetween">
					<view class="xiaohei ershiba">{{item.memo}}</view>
					<view class=" sanshier fonweight" :class="Number(item.money)>0?'xiaojin':'xiaohui'">￥{{item.money}}</view>
				</view>
				<view class="margin_top2 xiaohui ershiba">{{item.createtime_text}}</view>
			</view>
		</view>
		<!-- <view class="mainpadding2" style="position: relative;top: -70rpx;">
			<view class="ffffff mainpadding_top">
				<view class="xiaohei sanshier fonweight">提现方式</view>
				<view class=" margin_top flextop" @click="type=1">
					<u-icon class="" name="checkmark-circle-fill" v-if="type==1" color="#ba9549" size="30"></u-icon>
					<view class="weixz" v-else></view>
					<view class="flexbetween xiahuaxian" style="width: 87%;">
						<view class="flexleft">
							<view class="margin_right1">
								<u-icon class="" name="weixin-circle-fill" color="#50b674" size="28"></u-icon>
							</view>
							<view class="ershiba xiaohei">微信</view>
						</view>
						<view class="strongtext" style="color: #555555;" v-if="!userInfo.wechat_account">未绑定</view>
						<view class="strongtext" style="color: #555555;" v-if="userInfo.wechat_account">已绑定 {{userInfo.wechat_account}}</view>
					</view>
				</view>
				<view class=" margin_top flextop" @click="type=2">
					<u-icon class="" name="checkmark-circle-fill" v-if="type==2" color="#ba9549" size="30"></u-icon>
					<view class="weixz" v-else></view>
					<view class="flexbetween xiahuaxian" style="width: 87%;">
						<view class="flexleft">
							<view class="margin_right1">
								<u-icon class="" name="zhifubao-circle-fill" color="#1296DB" size="28"></u-icon>
							</view>
							<view class="ershiba xiaohei">支付宝</view>
						</view>
						<view class="strongtext" style="color: #555555;" v-if="!userInfo.ali_account">未绑定</view>
						<view class="strongtext" style="color: #555555;" v-if="userInfo.ali_account">已绑定 {{userInfo.ali_account}}</view>
					</view>
				</view>
				<view class=" margin_top flextop" @click="type=3">
					<u-icon class="" name="checkmark-circle-fill" v-if="type==3" color="#ba9549" size="30"></u-icon>
					<view class="weixz" v-else></view>
					<view class="flexbetween xiahuaxian" style="width: 87%;">
						<view class="flexleft">
							<view class="margin_right1">
								<image style="width: 54rpx;height: 54rpx;" src="../static/image/system/yhk.png" mode="">
								</image>
							</view>
							<view class="ershiba xiaohei">银行卡</view>
						</view>
						<view class="strongtext" style="color: #555555;" v-if="!userInfo.openbank">未绑定</view>
						<view class="strongtext" style="color: #555555;" v-if="userInfo.openbank">已绑定 {{userInfo.openbank}} （{{userInfo.bankno.slice(-4)}}）</view>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 保证金规则 -->
		<u-popup :show="bshow" @close="bshow=false" :round="10" mode="center">
			<view class="mainpadding">
				<view class="sanshier fonweight textcenter xiaohei">{{flag==1?"保证金规则":"冻结金额说明"}}</view>
				<view class="" style="height: 500rpx; overflow: auto; width: 550rpx;">
					<view class="xiaohei ershiba margin_top" v-if="flag==1">
						<u-parse :content="bzjgz"></u-parse>
					</view>
					<view class="xiaohei ershiba margin_top" v-if="flag==2">
						<u-parse :content="djprice_des"></u-parse>
					</view>
				</view>
				
				<view class="bigbtn margin_top5" @click="bshow=false">关闭</view>
			</view>
		</u-popup>
		<!-- <view class="gudingdb">
			<view class="ershiba xiaohei textcenter" style="text-decoration: underline;" @click="tztxjl">提现记录</view>
			<view class=" ffffff mainpadding margin_top" @click="submit()">
				<view class="bigbtn">立即提现</view>
			</view>
		</view> -->

	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				bshow:false,
				zfbshow: false, //支付宝
				zfbcloseable: true, //支付宝
				wxshow: false, //微信
				wxcloseable: true, //微信
				yhkshow: false, //银行卡
				yhkcloseable: true, //银行卡
				show: false,
				title: '您确定要解绑当前支付宝账号吗？',
				userInfo:{},
				type:1,//提现方式:1=微信.2=支付宝,3=银行卡
				withdrawal_price:"",
				bzjgz:"",
				djprice_des:"",
				flag:1,//1保证金规则，2冻结金额
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				pageShow:false
			}
		},
		onShow() {
			this.init()
			this.getsystem()
			this.getList()
		},
		methods: {
			getList(isPage, page) {
				let _this = this
				httpRequest.request('/api/user/userBzjLogIndex', 'GET', {
					page: page || 1,
					limit: 12
				}).then(res => {
					uni.stopPullDownRefresh()
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.getList(true, page);
			},
			getsystem() {
				httpRequest.request('/api/index/getConfigInfoItem', 'GET', {
					pidtype: "about_set",
					type: "djprice_des",
				}).then(res => {
					this.djprice_des = res.data
				})
				httpRequest.request('/api/index/getConfigInfoItem', 'GET', {
					pidtype: "about_set",
					type: "bzjgz",
				}).then(res => {
					this.bzjgz = res.data
				})
			},
			submit(){
				if(this.type==1 && !this.userInfo.wechat_account){
					httpRequest.toast('微信账户未绑定')
					setTimeout(()=>{
						uni.navigateTo({
							url:"/pages_mypage/bangdingwx"
						})
					},1000)
					return false
				}
				if(this.type==2 && !this.userInfo.ali_account){
					httpRequest.toast('支付宝信息未绑定')
					setTimeout(()=>{
						uni.navigateTo({
							url:"/pages_mypage/bangdingzfb"
						})
					},1000)
					return false
				}
				if(this.type==3 && !this.userInfo.openbank){
					httpRequest.toast('银行卡信息未绑定')
					setTimeout(()=>{
						uni.navigateTo({
							url:"/pages_mypage/bangdingyhk"
						})
					},1000)
					return false
				}
				if(Number(this.userInfo.bzj_price)==0){
					httpRequest.toast("暂无可提现金额")
					return false
				}
				httpRequest.request('/api/user/addWithdrawal', 'GET', {
					type:this.type,
					withdrawal_price:this.userInfo.bzj_price
				}).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						setTimeout(()=>{
							uni.navigateBack(1)
						},1000)
					} 
				})
				
			},
			init() {
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				httpRequest.request('/api/user/index', 'GET', {}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.userInfo = res.data
						this.pageShow = true
					} else {
						this.userInfo = null
					}
				})
			},
			// 跳转提现记录
			tztxjl() {
				uni.navigateTo({
					url: '/pages_mypage/tixianjl'
				})
			},
			cancel() {
				this.show = false
			},
			confirm() {
				this.show = false;
			},
			// 支付宝
			zfbclose() {
				this.zfbshow = false
				// console.log('close');
			},
			// 微信
			wxclose() {
				this.wxshow = false
				// console.log('close');
			},
			// 银行卡
			yhkclose() {
				this.yhkshow = false
				// console.log('close');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.xiaohui{
		color: #999;
	}
	.xiaojin{
		color: #ba9549;
	}
	.tixianbtn{
		width: 180rpx;
		height: 60rpx;
		background-color: #fff;
		border-radius: 50rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #BA9549;
	}
	.huanbtn {
		width: 180rpx;
		height: 60rpx;
		background-color: #fdf9f0;
		font-weight: 400;
		font-size: 28rpx;
		color: #BA9549;
	}

	.weixz {
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		border: 2rpx solid #999999;
	}

	.dbox {
		padding: 45rpx 40rpx 40rpx;
		background-color: #ba9549;
		position: relative;
	}
	.qsimg{
		width: 220rpx;
		height: 200rpx;
		position: absolute;
		right: 40rpx;
		top: 70rpx;
	}
</style>